import React, { useEffect } from "react";
import {
    FriendsMould,
    FriendsHeadMould,
    FriendsMainMould,
    FriendItemMould,
    ChatWrapMould,
    // ChatHeadMould,
    // ChatMaskMould,
    ChatSearchMould,
} from "../chatMould/mould";
import { Outlet } from "react-router-dom";
import socket from "@depjs/socketClient";
import { profile } from "@depjs/storage";
import { connect } from "react-redux";
import {
    getFrinedsListAction,
    addSelfFrinedAction,
    addFriendAction,
    updateLastChatMessageAction,
    updateNewMessageAction,
    getChatMessageListAction,
} from "@redux/actions02";

const Chat = (props) => {
    const {
        getFrinedsListAction,
        addSelfFrinedAction,
        addFriendAction,
        updateLastChatMessageAction,
        friends,
        updateNewMessageAction,
        getChatMessageListAction,
    } = props;

    useEffect(() => {
        getFrinedsListAction();
    }, [getFrinedsListAction]);

    useEffect(() => {
        const isMeExist = friends.find(
            (item) => item.userName === profile.userName
        );
        isMeExist || addSelfFrinedAction();
    }, [addSelfFrinedAction]); // eslint-disable-line react-hooks/exhaustive-deps

    useEffect(() => {
        socket.on("update your friends list", (msg) => {
            addFriendAction(msg);
        });
    }, [addFriendAction]);

    useEffect(() => {
        socket.on("i should update our lastChatMessage", (msg) => {
            updateLastChatMessageAction(msg);
        });
    }, [updateLastChatMessageAction]);

    useEffect(() => {
        socket.on("i received your chat message", (msg, cb) => {
            const s = msg.messages;
            const m = s[s.length - 1];
            const f = m.from.userName;
            const t = m.to.userName;
            const p = profile.userName;
            const h = window.location.pathname;
            const k = "/web-chat/chat/chat-window/";
            let id = "";

            if (h.includes(k)) {
                id = h.replace(k, "");
                id = id === "mask" ? "" : id;
            }

            if (t === p) {
                getFrinedsListAction();
            }

            /**
             * 以下情况才会更新当前聊天框内的消息：
             * 1.我发给我自己，且我打开了和自己的聊天框
             * 2.别人给我发消息，且我打开了和发送人的聊天框
             * 3.我发给别人消息，且我打开了和接收人的聊天框
             */
            if (
                (p === f && p === t && p === id) ||
                (p === t && id === f) ||
                (p === f && id === t)
            ) {
                updateNewMessageAction(msg.messages);
            }

            // 收到消息后 给个回执 说明自己已经收到消息 并且把当前所在的路由id回传，用于判断消息是否已读
            // A接收到B的消息，A给B发送消息，此时B就在和A聊天的界面上，那么此时A发给B的消息就应该修改为已读消息
            cb({
                receiveUser: p,
                currentRoute: id,
            });
        });
    }, [getFrinedsListAction, updateNewMessageAction]);

    useEffect(() => {
        socket.on("the chat message is recalled", (chater) => {
            getChatMessageListAction(chater);
        });
    }, [getChatMessageListAction]);

    return (
        <>
            <FriendsMould>
                <FriendsHeadMould>
                    <ChatSearchMould />
                </FriendsHeadMould>
                <FriendsMainMould>
                    {friends &&
                        friends.map((item, index) => {
                            return <FriendItemMould key={index} item={item} />;
                        })}
                </FriendsMainMould>
            </FriendsMould>
            <ChatWrapMould>
                {/* <ChatHeadMould />
      <ChatMaskMould /> */}
                <Outlet />
            </ChatWrapMould>
        </>
    );
};

export default connect(
    (state) => ({
        friends: state.frinedsListReducer,
    }),
    {
        getFrinedsListAction,
        addSelfFrinedAction,
        addFriendAction,
        updateLastChatMessageAction,
        updateNewMessageAction,
        getChatMessageListAction,
    }
)(Chat);
